<template>
  <div class="safety-alarm">
    <table>
      <thead>
        <tr>
          <th style="text-align: left;">
            <i :class="['iconfont', icon]"></i>
            {{ title }}
          </th>
          <th v-for="(item, index) in radioOptions" :key="index">
            {{ item.label }}
            <span :class="item.value">{{ getCountByRadio(item.value) }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, dataIndex) in data" :key="dataIndex">
          <td>{{ item.name }}</td>
          <td v-for="(option, radioIndex) in radioOptions">
            <el-radio :key="radioIndex" v-model="item.radio" :label="option.value">{{ option.label
            }}</el-radio>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
  
<script>
export default {
  name: "SafetyAlarm",
  props: {
    title: String,
    icon: String,
    data: Array,
    radioOptions: Array,
  },
  data() {
    return {
    };
  },
  methods: {
    getCountByRadio(radio) {
      return this.data.filter(item => item.radio === radio).length;
    }
  },
};
</script>
  
<style scoped>
.el-radio {
  zoom: 0.7;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 0.08rem 0;
}

th {
  color: #10a7ff;
  text-align: center;
}

.secondary {
  color: #ffa500;
}

.serious {
  color: red;
}

.meet {
  color: #ffa500;
}

.light {
  color: red;
}

.heavy {
  color: red;
}</style>
  